<template>
  <c-card>
    <el-form :inline="true" :model="formInline">
<!--      <el-form-item label="品种">-->
<!--        <el-input-->
<!--            v-model.trim="formInline.keyword"-->
<!--            placeholder="请输入"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="级别">-->
<!--        <el-select-->
<!--            v-model="formInline.level"-->
<!--            placeholder="请选择"-->
<!--            style="width: 200px;"-->
<!--        >-->
<!--          <el-option-->
<!--              v-for="item in typeOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
<!--        <el-button type="primary" @click="searchHandle">查询</el-button>-->
<!--        <el-button @click="resetHandle">重置</el-button>-->

        <el-button type="primary" @click="addHandle" @ok="searchHandle">新增</el-button>
      </el-form-item>
    </el-form>
  </c-card>
  <c-card>
    <el-table v-loading="isLoading" :data="tableData" stripe highlight-current-row>
      <el-table-column prop="recordDate" label="交易日期"/>
      <el-table-column prop="commission" label="手续费"/>
      <el-table-column prop="amount" label="盈亏额">
        <template #default="{row}">
          <el-text type="danger" v-if="row.type ===1">{{row.amount}}</el-text>
          <el-text type="success" v-if="row.type ===2">-{{row.amount}}</el-text>
        </template>
      </el-table-column>

<!--      <el-table-column fixed="right" label="操作">-->
<!--        <template #default="{row}">-->
<!--          <el-button link type="primary" @click="updateHandle(row)">编辑</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <c-pagination @page-change="pageChange" :total="pagination.total" :page="pagination.page"
                  :limit="pagination.pageSize"></c-pagination>
  </c-card>
  <add-update ref="addUpdateRef" @ok="getPageList"></add-update>
</template>

<script setup>
import {provide, reactive, ref} from "vue";
import {DEL, GET, POST} from "../../../api/index.js";
import {getColorName} from "../../../utils/commonScript.js";
import CCard from "../../../c-components/c-card.vue";
import CPagination from "../../../c-components/c-pagination.vue";
import {useRouter} from "vue-router";
import {typeOptions} from "../../../utils/listData.js";
import AddUpdate from "./add-update.vue";

const router = useRouter()
const tableData = ref([])
const formInline = reactive({
  keyword: '',
  level: ''
})
const isLoading = ref(false)
const addUpdateRef = ref(null)

const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

const addHandle = () => {
  addUpdateRef.value.open()
}
const updateHandle = (row) => {
  addUpdateRef.value.open(row)
}

const goHandle = ()=> {
  router.push({
    path: '/train'
  })
}
const getLevelName = (level) => {
  return typeOptions.filter(item => item.value === level)[0].label
}

const pageChange = (page, pageSize) => {
  pagination.page = page
  pagination.pageSize = pageSize
  getPageList()
}

// 获取所有股票信息
const getPageList = () => {
  isLoading.value = true
  GET("/market/transactionRecord/page", {
    page: pagination.page,
    pageSize: pagination.pageSize,
    orderField: 'record_date',
    order: 'desc'
  }).then(res => {
    tableData.value = res.data.list
    pagination.total = res.data.total
    isLoading.value = false
  }).catch(() => {
    isLoading.value = false
  })

}
getPageList()

const rcHandle = (row) => {
  router.push({
    path: '/train-record-detail',
    query: {
      id: row.id
    }
  })

}

const searchHandle = () => {
  tableData.value = []
  pagination.page = 1
  pagination.pageSize = 10
  pagination.total = 0
  getPageList()
}

const resetHandle = () => {
  formInline.keyword = ''
  formInline.level = ''
  searchHandle()
}

</script>

<style lang="scss" scoped>
</style>
